import React from 'react';

import { Button, Layout, Dropdown, Avatar} from 'antd';
// 引入图标
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';

import './index.css'
import { useDispatch } from "react-redux";
import { collapseMenu } from '../../store/reducers/tab'
import { useNavigate, Navigate } from 'react-router-dom'
const { Header } = Layout;
// collapsed为mian.js中header组件传递过来的属性
const CommonHeader = (collapsed) =>{
  const navigate = useNavigate()
    // 退出方法
  const logout = () => {
    localStorage.removeItem('token');
    navigate('/login')
  }
    // 定义下拉菜单
    const items = [
        {
          key: '1',
          label: (
            <a target="_blank" rel="noopener noreferrer" >
             个人中心
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a onClick={()=>logout()} target="_blank" rel="noopener noreferrer" >
              退出
            </a>
          )
        }
       
      ];
 // 创建dispatch
  const dispatch = useDispatch()

      // 登出
  const setCollapsed = () => {
    console.log(collapsed)
    // 引入tab.js,调用collapseMenu
    dispatch(collapseMenu())
  }
    return (
        <Header className='header-container'>
        <Button
          type="text"
          // icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          // onClick={() => setCollapsed(!collapsed)}
        //   引入图标
          icon={<MenuUnfoldOutlined />}
        //   绑定一个点击事件
          onClick={() => setCollapsed(!collapsed)}
          style={{
            fontSize: '16px',
            width: 64,
            height: 32,
            background:'#fff'
          }}
        />
        <Dropdown  menu={{items}}>
            {/* 接收menu数据 */}
          
                
        {/* 引用头像组件 https://ant-design.antgroup.com/components/avatar-cn*/}
          <Avatar size={36} src={<img src={require("../../assets/images/user.png")}/> }/>

        </Dropdown>

       
      </Header>
    )
}
export default  CommonHeader